<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-zookeeper-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="zk-navigation">
                    <form style="width: 100%;" action="/zk">
                        <div class="input-group no-border">
                            <input type="text" name="keyword" class="form-control" placeholder="Search..."/>
                            <input type="hidden" name="active" th:value="${active}"/>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <i class="now-ui-icons ui-1_zoom-bold"></i>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm"></div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">ZooKeeper节点列表</h5>
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-pills nav-pills-primary" role="tablist">
                                <li class="nav-item" th:each="pre : ${prefixs}">
                                    <a
                                            th:class="${pre == active ? 'nav-link active' : 'nav-link'}"
                                            th:href="@{'/zk?active=' + ${pre}}"
                                            th:text="${pre}">
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content tab-space">
                                <div class="tab-pane active" th:id="${active}">
                                    <div class="table-responsive">
                                        <table id="datas_table" class="table">
                                            <thead class="text-primary">
                                            <tr>
                                                <th>#</th>
                                                <th>Path</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="it, itStat: ${datas}">
                                                <td th:text="${itStat.index + 1}"></td>
                                                <td th:text="${it.path}"></td>
                                                <td>
                                                    <button type="button" rel="tooltip" title="删除此节点，危险操作!"
                                                            class="btn btn-sm btn-danger"
                                                            th:attr="data-path=${it.path}"
                                                            onclick="delete_zk_path(this)">
                                                        <i class="now-ui-icons ui-1_simple-remove"></i>
                                                    </button>
                                                    <button th:if="${it.data.length() > 0}" type="button" rel="tooltip"
                                                            title="查看此节点的数据"
                                                            class="btn btn-sm btn-info"
                                                            th:attr="data-path=${it.path}"
                                                            onclick="goto_path_data(this)">
                                                        <i class="now-ui-icons files_paper"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="zk_data_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header justify-content-center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="now-ui-icons ui-1_simple-remove"></i>
                </button>
                <h4 class="title title-up">节点数据</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title" id="path_h5"></h5>
                                </div>
                                <div class="card-body">
                                    <pre id="data_pre_elem"></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<div th:insert="js"></div>
<script>

    $(document).ready(function () {
        $("#zookeeper_li").addClass("active");

        $("#datas_table").oneSimpleTablePagination({rowsPerPage: 10});

        $("#zk_data_modal").on("hidden.bs.modal", function () {
            $("#data_pre_elem").text("");
            $("#path_h5").text("");
        });
    });

    function goto_path_data(btn) {
        var fullPath = $(btn).attr("data-path");
        $.ajax({
            url: "/interface/zk_data",
            type: "POST",
            data: {
                "path": fullPath
            },
            dataType: "JSON",
            success: function (response) {
                $("#data_pre_elem").text(response.data.data);
                $("#path_h5").text(response.data.path);
                $("#zk_data_modal").modal("show");
            }
        });
    }

    function delete_zk_path(btn) {
        var path = $(btn).attr("data-path");
        Swal.fire({
            title: "AntRpc Console",
            text: "确定要删除吗？这是非常危险的操作，除非你知道为什么要删除此节点，否则不要删除!!!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn btn-danger",
            cancelButtonClass: "btn btn-success",
            confirmButtonText: "删除",
            buttonsStyling: false
        }).then(function (result) {
            if (result.value) {
                $.ajax({
                    url: "/interface/deleteZkNode",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "path": path
                    },
                    success: function (response) {
                        if (response.code === 2000) {
                            Swal.fire({
                                title: "AntRpc Console",
                                text: "删除成功!",
                                type: "success",
                                confirmButtonClass: "btn btn-success",
                                buttonsStyling: false
                            });
                        } else {
                            Swal.fire({
                                title: "AntRpc Console",
                                text: "删除失败",
                                confirmButtonClass: "btn btn-info",
                                buttonsStyling: false
                            });
                        }
                        var activeId = $(".nav-pills-primary").find("a.active").text();
                        window.location.href = "/zk?active=" + activeId;
                    }
                });
            }
        });

    }

</script>
</body>
</html>